// src/views/map/Baidu.tsx
import { message } from 'antd';
import React, { useEffect } from 'react';

type BaiduProps = {}

export const Baidu = (props: BaiduProps) => {
    useEffect(() => {
        var map = new window.BMapGL.Map("container");
          map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 12);
           var output = "从西单到上地驾车需要";
           var searchComplete = function (results: any) {
            if (transit.getStatus() !== window.BMAP_STATUS_SUCCESS) {
                   return;
               }
            var plan = results.getPlan(0);
               output += plan.getDuration(true) + "\n";    //获取时间
               output += "总路程为：";
            output += plan.getDistance(true) + "\n";    //获取距离
           }
           var transit = new window.BMapGL.DrivingRoute(map, {
               renderOptions: { map: map },
               onSearchComplete: searchComplete,
               onPolylinesSet: function () {
                   setTimeout(function () { message.success(output) }, 1000);
               }
           });
           var start = new window.BMapGL.Point(116.404844, 39.911836);
           var end = new window.BMapGL.Point(116.308102, 40.056057)
           transit.search(start, end);
       }, [])
       return (
           <>
               <div id="container"></div>
           </>
       );
   }